<template>
  <div>
    <span class="extension_list_title"> <strong>推广商品</strong> *商户更改佣金比例后会实时更新,请注意查看</span>
    <ul>
      <li class="extension_list_li" v-for="(item,key) in extensionlist" :key="key">
        <span class="theimg" @click="godetails(item.vid,item.data_type)">
          <img  :src="item.picture" alt="">
          <p v-if="item.data_type == 2">专栏</p>
        <p v-if="item.data_type == 1">视频</p>
        <p v-if="item.data_type == 3">图文</p>
        </span>

        <span class="extension_list_right">
          <p class="extension_list_text1">{{item.title}}</p>
          <span class="tuiguang">
            <span>佣金比例:{{item.client_allot}}%</span>
            <span @click="gohaibaodetails(item.vid)">推广</span>
          </span>
          <p class="shouyi">预计收益:{{item.profit}}元</p>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ExtensionList',
  props: {
    extensionlist: {}
  },
  data () {
    return {}
  },
  methods: {
    gohaibaodetails (vid) {
      this.$router.push({name:"detailofextension", path: '/detailofextension' ,query:{vid:vid}})
    },
    godetails(e, s) {
      if (s == 2) {
        this.$router.push({
          pash: "/detailofboom",
          name: "detailofboom",
          query: { vid: e }
        });
      }
      if (s == 1) {
        this.$router.push({
          pash: "/detailofvedio",
          name: "detailofvedio",
          query: { vid: e }
        });
      }
      if (s == 3) {
        this.$router.push({
          pash: "/detailofpic",
          name: "detailofpic",
          query: { vid: e }
        });
      }
    }
  },
  computed: {

  }
}
</script>

<style lang="less" scoped>
    .extension_list_title {
      display: block;
      /*width: 100%;*/
      font-size: 13px;
      color: #acacac;
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 20px;
      strong {
        font-weight: 600;
        font-size: 18px;
        color: black;
      }
    }
    ul{
    }
    .extension_list_li{
      /*width: 100%;*/
      height: 140px;
      padding-left: 15px;
      border-bottom: 1px solid #f5efef;
      display: flex;
      align-items: center;
      .theimg{
        position: relative;
        width: 40%;
        img{
          width: 100%;
          height: 110px;
          border-radius: 10px;
        }
        p{
          position: absolute;
          bottom: 2px;
          width: 100%;
          text-align: right;
          font-size: 14px;
          background: linear-gradient(#908080, black);
          opacity: 0.3;
          color: white;
        }
      }
      .extension_list_right{
        width: 55%;
        height: 110px;
        padding-left: 5px;
        .extension_list_text1{
          width: 100%;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          font-size: 16px;
        }
        .tuiguang{
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span:first-child{
            font-size: 14px;
            color: #acacac;
          }
          span:last-child{
            width: 65px;
            height:35px;
            border-radius: 8px;
            color: white;
            line-height: 35px;
            text-align: center;
            font-size: 16px;
            background:#dc376d;
          }
        }
        .shouyi{
          font-size: 14px;
          margin-top: 20px;
          color: #dc376d;
        }
      }
    }

</style>
